<template>
  <div id="table_hdgl">
    <div class="table_hdgl">
      <!-- 活动类型 -->
      <!-- <div class="leixing"> -->
        活动类型：
        <el-select size="small" v-model="activityTypeId" @change="typeIdchange" placeholder="请选择">
          <el-option v-for="(item,key) in ActivityTypeData" :key="key" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      <!-- </div> -->
      <!-- 起止时间 -->
      <!-- <div class="date"> -->
        起止时间：
        <el-date-picker
          size="small"
          value-format="yyyy-MM-dd"
          clearable
          v-model="date"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['23:59:59', '23:59:59']"
          @change="datechange">
        </el-date-picker>

      <!-- </div> -->
      <!-- 搜索标题 -->
      <div class="sousuo">
        <el-input v-model="searchCriteria" size="small" clearable placeholder="请输入活动标题、关键词"></el-input>
        <el-button type="primary" size="small" @click="search">搜索</el-button>
      </div>
    </div>
    <p>共有数据：{{total}}条</p>

    <!-- 表格 -->
    <el-table :data="ActivityData" border width="100%" :header-cell-style="{background:'#f9f9f9'}">
      <el-table-column prop="id" label="ID">
      </el-table-column>
      <el-table-column prop="activityPosters" label="活动海报">
        <template slot-scope="scope">
          <img style="border:none;" :src="scope.row.activityPosters">
        </template>
      </el-table-column>
      <el-table-column prop="activityTitle" label="活动标题">
      </el-table-column>
      <el-table-column prop="activityNumber" label="活动编号">
      </el-table-column>
      <el-table-column prop="activityTypeId" label="活动类型">
      </el-table-column>
      <el-table-column prop="name" label="详情">
        <template slot-scope="scope">
          <router-link :to="'../admin/hdxq?activityId='+scope.row.id">查看详情</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="keywords" label="关键词">
      </el-table-column>
      <el-table-column prop="" label="发布人">
      </el-table-column>
      <el-table-column prop="" label="发布时间">
      </el-table-column>
      <el-table-column prop="checkPersonContact" label="审核人联系方式" v-if="this.parent.activeName === '3'">
      </el-table-column>
      <el-table-column prop="checkRemark" label="审核备注" v-if="this.parent.activeName === '3'">
      </el-table-column>
      <el-table-column label="操作" v-if="this.parent.activeName === '1'">
        <template slot-scope="scope">
          <el-button size="small" plain @click="tongguo(scope.row)">通过</el-button>
          <el-button size="small" plain autofocus @click="jujue(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <yema :parent="this"></yema>

    <!-- 拒绝审核 -->
    <update1 ref="update1" :parent="this"></update1>

  </div>
</template>

<script>
  import update1 from "../update/jujue_hdgl.vue";
  export default {
    components:{
      update1,
    },
    data() {
      return {
        pageNum: 1,
        pageSize: 11,
        total: 0,
        ActivityData: [],
        ActivityTypeData: [],
        activityTypeId: "",
        // checkStatus: this.parent.activeName,
        searchCriteria: '',
        date: [],
        activityEndTime: '',
        activityStartTime: '',
      }
    },
    methods:{
      // 获取活动数据
      getData(){
        // console.log(this.parent.activeName)
        this.$axios.request({
          url: this.API + "/activity/activity/list",
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            checkStatus: parseInt(this.parent.activeName),
            activityTypeId: this.activityTypeId,
            searchCriteria: this.searchCriteria,
            activityEndTime: this.activityEndTime,
            activityStartTime: this.activityStartTime
          },
          method: 'get'
        }).then((res)=>{
          this.total = res.data.total;
          this.ActivityData = res.data.rows;
        })
      },
      // 获取活动类型列表
      getActivityTypeData(){
        this.$axios.get(this.API+'/activity/activityType/list').then((res)=>{
          this.ActivityTypeData = res.data.rows;
        })
      },
      // 活动类型改变时
      typeIdchange(){
        this.getData();
      },
      // 点击搜索
      search(){
        // console.log(this.parent.activeName === "1")
        this.getData();
      },
      // 日期改变时
      datechange(){
        this.activityStartTime = this.date[0];
        this.activityEndTime = this.date[1];
        console.log(this.date)
      },
	  // 拒绝审核
      jujue(row){
        this.$refs.update1.dialogFormVisible = true;
        this.$refs.update1.id = row.id;
        // console.log(this.$refs.update1.id);
      },
	  // 活动通过
	  tongguo(row){
		this.$confirm("确认通过该活动的审核", "确认通过", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning"
		}).then(() => { //点击确定
		  //获取时间
      var tt = new Date();
      var checkTime = tt.getFullYear()+"-"+tt.getMonth()+1+"-"+tt.getDate()+" "+tt.getHours()+":"+tt.getMinutes()+":"+tt.getSeconds();

      // 请求数据
		  this.$axios.request({
		    url: this.API + "/activity/activity/activityCheck",
		    params: {
		      activityId: row.id,
          checkTime
		    },
		    method: "post",
		    // 请求成功
		  }).then((res) => {
		    // console.log(res)
		    if (res.data.code == 0) { // 通过审核成功
		      this.getData(); //重新请求数据
		      this.$message.success("通过审核成功");
		    } else {
		      this.$message.error(res.data.msg)
		    }
		  })
		})
	  }
    },
    mounted() {
      this.getActivityTypeData();
      this.getData();
    },
    props:['parent']
  }
</script>

<style>
  .table_hdgl {
    /* display: flex; */
  }

  .table_hdgl>div {
    margin: 0px 10px;
  }

  .el-date-editor--daterange.el-input__inner{
    width: 220px;
  }

  .sousuo{
    display: inline-block;
  }

  .sousuo .el-input {
    width: 150px;
  }

  #table_hdgl p{
    color: #5e5e5e;
    font-size: 14px;
    margin-top: 0;
  }
</style>
